<template>
  <div v-loading="loading" class="analysisContainer h-flex">
    <div class="h-flex-elastic" style="overflow: hidden;">
      <div class="analysisPictureContainer">
        <div class="pictureWrapper" style="width: 100%; height: calc(100% - 66px);">
          <pillar-query-list v-if="showPillarPager" :pillar-pager="pillarPager" :pillar-id="pillarId" @setDeviceCode="setDeviceCode" />
          <el-container>
            <el-main>
              <div class="divImgBox">
                <!--<img :src="viewImgArr[0]" alt="" class="imgBox">-->
                <viewer :options="options" :images="viewImgArr">
                  <img v-for="(img, index) in viewImgArr" v-show="currentImgSrc === img" :key="index" :src="img">
                </viewer>
              </div>
            </el-main>
            <el-aside width="170px">
              <el-button-group>
                <el-button type="primary" class="toggleBtn" :class="{ active: typeOfImg === '1' }" @click="viewImgArr = partImgArr;currentImgSrc = viewImgArr[0];curIndex = 0;typeOfImg = '1'">局部</el-button>
                <el-button type="primary" class="toggleBtn" :class="{ active: typeOfImg === '2' }" @click="viewImgArr = globalImgArr;currentImgSrc = viewImgArr[0];curIndex = 0;typeOfImg = '2'">全景</el-button>
              </el-button-group>
              <div class="middle_outer">
                <div class="prev" @click="prevScroll">
                  <i class="el-icon-caret-top" />
                </div>
                <div id="center" ref="content" class="imgs">
                  <div id="wrap" ref="scrollbody" class="wrap" style="top: 0;">
                    <ul>
                      <li v-for="(img, index) in viewImgArr" :key="index"><img height="110" width="136" :class="{selected: index===curIndex}" :src="img" :alt="index" @click="currentImgSrc = img;curIndex = index"></li>
                    </ul>
                  </div>
                </div>
                <div class="next" @click="nextScroll">
                  <i class="el-icon-caret-bottom" />
                </div>
              </div>
            </el-aside>
          </el-container>
        </div>
        <div class="tableContainer widthPage" style="height: 66px;">
          <div class="block">
            <!--<Pagination
              :hidden="false"
              layout="total, prev, next, jumper"
              :total="20" />-->
            <div class="img-page-info">当前第{{ curIndex+1 }}帧，共{{ viewImgArr.length }}帧</div>
            <div class="play-ctrl">
              <el-button v-show="!playStatus" size="mini" @click="playStatus = !playStatus"><svg-icon icon-class="play-white" />&nbsp;播放</el-button>
              <el-button v-show="playStatus" size="mini" @click="playStatus = !playStatus"><svg-icon icon-class="pause-white" />&nbsp;暂停</el-button>
              <select
                v-model="speed"
                style="width: 60px;float: left"
                class="phm-select">
                <option value="1000">慢速</option>
                <option value="500">正常</option>
                <option value="100">快速</option>
              </select>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import PillarQueryList from './PillarQueryList'
import { getC2Images, find2cDetailPillarNum } from '@/api/cms/detect-data'
export default {
  name: 'Analysis2C',
  components: {
    PillarQueryList
  },
  props: {
    showPillarPager: {
      type: Boolean,
      default: false
    },
    deviceCode: {
      type: String,
      default: ''
    },
    devClassCode: {
      type: String,
      default: ''
    },
    date: {
      type: String,
      default: ''
    },
    timeAxisType: {
      type: String,
      default: 'default'
    },
    pillarId: String,
    detectJobId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      typeOfImg: '1',
      loading: false,
      speed: 500,
      playStatus: false,
      curIndex: 0,
      options: {
        inline: false
      },
      viewImgArr: [],
      currentImgSrc: '',
      partImgArr: [],
      globalImgArr: [],
      interval: null,
      pillarPager: [],
      dateVal: this.date,
      pillarCode: ''
    }
  },
  watch: {
    playStatus(val) {
      // 播放状态
      if (val) {
        const el = document.getElementById('wrap')
        // const wrapHeight = this.$refs.scrollbody.offsetHeight
        this.interval = setInterval(() => {
          if (this.curIndex < this.viewImgArr.length - 1) {
            this.curIndex++
            this.currentImgSrc = this.viewImgArr[this.curIndex]
            el.scrollTop = this.curIndex * 100
          } else {
            this.playStatus = false
          }
        }, this.speed)
      } else {
        if (this.interval) {
          clearInterval(this.interval)
        }
        this.interval = null
      }
    },
    date(val) {
      // 时间轴筛选图片
      if (this.timeAxisType === '2C') {
        this.dateVal = val
        // 时间轴变化时查询数据
        if (this.devClassCode === '14') {
          this.getImages()
        } else if (this.devClassCode === '100' && this.pillarCode !== '') {
          this.getImages()
        }
      }
      this.getImages(val)
    },
    detectJobId(val) {
      const queryParams = {}
      if (this.devClassCode === '14') {
        queryParams.pillarCode = this.deviceCode
      } else if (this.devClassCode === '100') {
        queryParams.anchorCode = this.deviceCode
      } else {
        queryParams.deviceCode = this.deviceCode
      }
      const detectJobId = val.split('_')[0]
      const date = val.split('_')[1]
      this.dateVal = date
      queryParams.detectJobId = detectJobId
      this.showPillarPager && find2cDetailPillarNum(queryParams).then(response => {
        console.log('通过锚段查询支柱信息及区间站场名称', response)
        if (response.data) {
          this.pillarPager = response.data && response.data.records.reverse() || []
          const pillarCode = this.pillarPager[0].pillarAttr[0].pillarCode
          this.getImages(date, pillarCode)
        }
      })
    }
  },
  mounted() {
    /* if (this.date) {
      if (this.devClassCode === '14') {
        this.getImages()
      } else if (this.devClassCode === '100' && (this.pillarCode !== '' || this.pillarId !== '')) {
        this.getImages()
      }
    }*/
    // 空格控制播放/暂停
    window.addEventListener('keyup', this.spaceHandler)
  },
  beforeDestroy() {
    window.removeEventListener('keyup', this.spaceHandler)
  },
  methods: {
    makeImgList(list, type) {
      const partTemp = []
      list.forEach(item => {
        if (item.cameraNo === type) {
          partTemp.push(item.picPath)
        }
      })
      return partTemp
    },
    getImages(date, pillarCode) {
      this.loading = true
      this.currentImgSrc = ''
      this.viewImgArr = []
      const queryParams = {}
      if (this.devClassCode === '14') {
        queryParams.pillarCode = this.deviceCode
      } else if (this.devClassCode === '100') {
        queryParams.anchorCode = this.deviceCode
        if (this.pillarCode) {
          queryParams.pillarCode = this.pillarCode
        }
      } else {
        queryParams.deviceCode = this.deviceCode
      }
      queryParams.detectDate = this.dateVal
      if (queryParams.detectDate !== '') {
        getC2Images(queryParams).then(response => {
          this.loading = false
          // 2c图片
          // console.log('2c图片', response)
          const item = response.data && response.data[0]
          if (item) {
            this.partImgArr = this.makeImgList(item.picList, '1')
            this.globalImgArr = this.makeImgList(item.picList, '0')
            this.viewImgArr = this.partImgArr
            this.currentImgSrc = this.partImgArr[0]
            this.curIndex = 0
          }
        })
      } else {
        this.loading = false
        this.partImgArr = []
        this.globalImgArr = []
        this.viewImgArr = []
        this.currentImgSrc = ''
      }
    },
    setDeviceCode(val) {
      this.pillarCode = val
      this.getImages(this.dateVal, val)
      this.$emit('regetTimeAxis', val, '2C')
      // this.getImages()
    },
    prevScroll() {
      // 图片翻页
      document.getElementById('wrap').scrollTop -= this.$refs.scrollbody.offsetHeight
    },
    nextScroll() {
      document.getElementById('wrap').scrollTop += this.$refs.scrollbody.offsetHeight
    },
    spaceHandler(event) {
      if (event.keyCode === 32) {
        event.preventDefault()
        this.playStatus = !this.playStatus
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .analysisContainer {
    height: 100%;
    color: #fff;

    .analysisPictureContainer {
      position: relative;
      z-index: 1;
      height: 100%;
      padding: 0;

      .divImgBox {
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden;

        img {
          position: relative;
          left: 50%;
          width: auto;
          height: 100%;
          transform: translateX(-50%);
        }

        div {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
        }
      }

      .el-main {
        padding: 8px 0;
      }

      .el-aside {
        height: 100%;
        padding-right: 0;
        padding-left: 10px;
        margin-bottom: 0;
        text-align: center;
        background: transparent;

        .el-button + .el-button {
          margin-left: 0 !important;
        }

        .el-button-group {
          width: 100%;
          overflow: hidden;

          .toggleBtn {
            float: left;
            width: 50%;
            background: transparent;
            border: 0;
            border-bottom: 2px transparent solid;
            border-radius: 0;

            &.active {
              border-color: #0580c9;
            }
          }
        }

        .middle_outer {
          position: relative;
          height: calc(100% - 40px);
          padding: 32px 0;
          margin-top: 4px;
          background: #18304d;

          .next,
          .prev {
            position: absolute;
            width: 100%;
            line-height: 24px;
            color: #555;
            text-align: center;
            cursor: pointer;
            background: #0c2442;

            &:hover {
              opacity: 0.7;
            }
          }

          .prev {
            top: 0;
          }

          .next {
            bottom: 0;
          }

          .imgs {
            position: relative;
            height: 100%;
            overflow: hidden;

            .wrap {
              position: absolute;
              top: 0;
              bottom: 0;
              width: 100%;
              height: 100%;
              overflow: auto;
              overflow-x: hidden;

              ul {
                width: 100%;
                min-height: 100%;
                padding: 0 4px 0 0;
                margin: 2px 2px;
                white-space: nowrap;

                li {
                  display: block;
                  width: calc(100% - 10px);
                  height: 100px;
                  margin: 5px;
                  text-align: center;
                  list-style: none;

                  img {
                    display: block;
                    width: 100%;
                    height: 100%;
                    border: 2px solid transparent;

                    &.selected {
                      border-color: #6a9af4;
                    }
                  }
                }
              }
            }
          }
        }
      }

      .pillar-query-list {
        height: 80px;
      }

      .pillar-query-list + .el-container {
        height: calc(100% - 80px);
      }

      .el-container {
        height: 100%;
      }
    }

    .widthPage {
      .block {
        height: 42px;
        background: #020e28;
      }
    }

    .pagination-container {
      position: absolute;
      left: 0;
    }

    .img-page-info {
      float: left;
      padding-left: 10px;
      line-height: 42px;
    }

    .play-ctrl {
      float: right;
      padding: 5px;
      margin-right: 45%;

      .el-button {
        color: #fff;
        background: #1c3369;
        border-color: #1c3369;
        border-radius: 0;
      }
    }
  }
</style>
